{extend name="template/base_default"}
{block name="header"}
<script>

        function isWeiXin(){
            var ua = window.navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        }
        if(isWeiXin()){
        }else{
            window.location.href='https://shop530082865.taobao.com/';
        }


</script>
<link rel="stylesheet" href="__CSS__/common.css">
<link rel="stylesheet" href="__CSS__/product_list/index.css">
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/jquery-weui.min.js"></script>
{/block}
{block name="body"}
<style>
    body{
        margin:0;
        padding:0;
    }
    a{
        text-decoration:none;
    }
    li{
        list-style: none;
    }
    .footer{
        height: 60px;
        width:100%;
        position:fixed;
        bottom:0;
        background-color:#f47119;
        color:white;
    }
    .footer-item{
        margin-top: 10px;
        width:20%;
        float: left;
        text-align: center;
        font-size: 13px;
        overflow: hidden;
        color:white;
    }
    .footer-left{
        float: left;
    }
    .footer-right{
        float: right;
    }
    .footer-item-head{
        position: absolute;
        margin-left:50%;
        left:-30px;
        height: 60px;
        width:60px;
        bottom:10px;
        color:white;
    }
    .footer-item-head img{
        width:100%;
        height:100%;
        border-radius: 60px;
        border:4px solid #fff
    }
    .footer-item-img{
        height: 25px;
        width:25px;
        margin:0 auto;
        margin-top:2px;
    }
    .footer-item img{
        width:100%;
        height:100%
    }
    .footer .selected{
        color:white;
    }
    .top{
        width:100%;
        height:40px;
        width:100%;
        position:fixed;
        top:0;
        background-color:#F47119 ;
        margin:0;
        border:0;
        left:0;
        right:0;
        line-height: 40px;
        text-align: center;
        color:white;

    }
    .box-content{
        width:46%;
        height:200px;
        background-color: white;
        float: left;
        margin-left: 12px;
        margin-top: 10px;
        text-align: center;

    }
    .box-content img{
        height:130px;
        width:100%;
        margin-left: auto;
        margin-right: auto;

    }
    .box-content-li1{
        height:30px;
        width:100%;
        line-height: 30px;
        float: left;
        margin-top: -20px;
        text-align: center;

        color:#545454;
        font-family: "Microsoft YaHei UI";
    }
    .box-content-li2{
        height:30px;
        width:100%;
        line-height: 30px;
        float: left;
        text-align: center;

        font-size: 14px;
        color:#8c8c8c;
        font-family: "Microsoft YaHei UI";
    }
    .li-border{
        height:30px;
        text-align: center;
        float: left;
        margin-top: 10px;
        margin-left: 16px;
        border: solid 1px #545454;
        width:10%;
        line-height: 30px;
        border-radius: 3px;
        color:#545454;
    }
    .li-border-select{
        height:30px;
        text-align: center;
        float: left;
        margin-top: 10px;
        margin-left: 16px;
        border: solid 1px #c9302c;
        width:10%;
        line-height: 30px;
        border-radius: 3px;
        color:#c9302c;
    }
    .list-ul{
        margin-top: 40px;
    }
    .v-hidden{
        display: none;
    }
    .v-show{
        display: block;
        width: 100%;
        height:100%;
        z-index:999;
        background-color: rgba(255, 255, 255, 0.8);
        position:absolute;
        top:0;
        left:0;
    }
</style>
<div class="top">
    {$title}
</div>
{eq name="has" value="1"}
<div style="width:100%;text-align: center;margin-left: -20px">
    <ul class="list-ul">
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001001'])}">霜</a></li>
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001002'])}">膏</a></li>
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001003'])}">乳</a></li>
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001004'])}">油</a></li>
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001005'])}">露</a></li>
        <li class="li-border"><a href="{:url('shop/product_list',['code'=>'00S001006'])}">胶</a></li>
    </ul>
</div>
{/eq}
<div style="height:40px;width:100%;">

</div>
<div class="v-hidden" id="zzc">
点击右上角在浏览器打开淘宝链接
</div>
{volist name='list' id='vo'}
    <div class="box-content open">
        <div>
            <img src="{:getImgUrl($vo['img_id'])}">
        </div>
            <ul style="text-align: center;padding: inherit">
                <li class="box-content-li1">
                    {$vo.name}
                </li>
                <li class="box-content-li2">
                    规格：{$vo.specifications}
                </li>
            </ul>
    </div>
{/volist}
<div class="fubeirou">

</div>

<div style="height:60px;width:100%;float:left">

</div>

{include file="template/nav_bar"}
{/block}
{block name="footer"}

<script type="text/javascript" src="__JS__/public.js"></script>
<script type="text/javascript">


    $('.li-border').click(function(){
        console.log(1);
        this.attr("class","li-border-select")
        this.siblings().attr("class","li-border");
    });
    $('.open').click(function(){
       // alert('x');
        $('#zzc').attr("class","v-show");
    });
    $('#zzc').click(function(){
        $('#zzc').attr("class","v-hidden");
    })
</script>
{/block}